<template>
	<view class="container">
		<view class="o-p c-t7 c-tb">请选择您所在的小区</view>
		<view class="o-plr">
			<view class="o-pb">请选择省市区：</view>
			<view @click="getRegion()" class="o-p o-ptn u-bb">
				<text class="c-color-g2">{{position.province.label}}, {{position.city.label}}, {{position.area.label}}</text>	
				<u-picker mode="region" v-model="show" @confirm="confirm" @cancel="cancel" :area-code='["45", "4501", "450103"]'></u-picker>
			</view>
		</view>
		<view class="o-plr">
			<view class="o-ptb">请选择小区名称：</view>
			<view @click="getlistCell()" class="o-p o-ptn u-bb">
				<text class="c-color-g2">{{cellTwo.label?cellTwo.label:(cell.label?cell.label:'请选择')}}</text>
				<u-select v-if="cell.label||cellTwo.label" v-model="showCell" mode="single-column" @confirm="confirmCell" @cancel="cancelCell" :list="listCell"></u-select>
			</view>
		</view>
		
		<view class="c-tc" style="padding-top: 60rpx;">
			<u-button @click="addCell()" type="primary" plain size="medium">添加</u-button>
		</view>
		
		<block v-if="tagList.length>0">
			<view class="o-p c-t7 c-tb">已添加小区</view>
			<view class="l-fc o-plr l-fw">
				<view  v-for="(item,index) in tagList" :key="index" class="o-m-s o-mtn">
					<u-tag :text="item.label" mode="plain" closeable :show="item.show" @close="tagClick(index)"/>
				</view>
			</view>
		</block>
		
		<view class="c-tc o-plr" style="padding-top: 160rpx;">
			<u-button @click="subamit()" :disabled="disabled" type="primary">确定</u-button>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:'addCell',
		data() {
			return {
				show: false, //是否显示省市区弹窗
				showCell: false, //是否显示小区弹窗
				position: {
					province: {label: '请选择', value: null,},
					city: {label: '请选择', value: null,},
					area: {label: '请选择', value: null,}
				},
				cellTwo: {},
				// cell: {},
				//小区列表
				// listCell: [{
				// 	value: '1',
				// 	label: '江'
				// },
				// {
				// 	value: '2',
				// 	label: '湖'
				// }],
				tagList: [],
				disabled: true,
				userId: uni.getStorageSync('userId'),
			}
		},
		computed:{
			listCell: vm => vm.$store.getters.listCell,
			cell: {
				get: function() {
					console.log('this ==>', this)
					return this.listCell[0]
				},
				set: function(val) {
					console.log('val ==>', val)
					this.cellTwo = val
				}
			}
		},
		
		methods:{
			//显示省市区选框
			getRegion() {
				this.show = true
			},
			//确定
			confirm(e) {
				console.log('e ==>', e)
				this.position = e;
				this.show = false
				this.$store.dispatch('get_regionList', {provinceId:e.province.value,cityId:e.city.value,areaId:e.area.value});
				// setTimeout(() => {this.cell = this.listCell[0]}, 200)
				
			},
			//取消
			cancel(e) {
				this.show = false
			},
			getlistCell() {
				if(this.cell&&this.cell.label) {
					this.showCell = true
				}
			},
			confirmCell(e) {
				// console.log('e ==>', e)
				this.cell = e[0]
				this.showCell = false
				setTimeout(() => {console.log('this.showCell ==>', this.cell)}, 1000)
			},
			cancelCell() {
				this.showCell = false
			},
			//添加小区
			addCell() {
				let cell = {...this.cell,...this.cellTwo, show:true}
				this.tagList.push(cell);
				this.is_disabled();
			},
			//删除
			tagClick(index) {
				this.tagList[index].show = false
				this.tagList = this.tagList.filter((item) => item.show);
				this.is_disabled()
			},
			is_disabled() {
				if(this.tagList.length>0) {
					this.disabled= false
				}else {
					this.disabled= true
				}
			},
			//确定
			subamit() {
				let array = new Set(this.tagList.map(item => item.value));
				let ids = [...array];
				let data = {
					userId: this.userId,
					ids:ids.join(',')
				}
				this.$store.dispatch('add_cell', data)
				.then(res => {
					this.$Function.Suc(res.data.msg)
					if(res.data.code == 200) {
						this.$store.dispatch('get_myRegionList', {userId: this.userId})
						setTimeout(() => {
							this.$Function.LinkTo('', 'Back')
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style>
</style>
